<style lang="scss" scoped>
.main-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .chart-container {
    width: 100%;
    height: 400px;
    padding: 20px;
  }

  .bottom-container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;

    .left-container {
      padding-right: 4px;
      width: 50%;
      display: flex;
      justify-content: flex-end;

      .left-content {
        width: 600px;
        .input-item {
          display: flex;
          margin-top: 8px;
        }
        :first-child {
          margin-top: 0px;
        }
      }
    }

    .right-container {
      padding-left: 4px;
      width: 50%;
      justify-content: flex-start;

      .right-content {
        width: 600px;
        .input-item {
          display: flex;
          margin-top: 8px;
        }
        :first-child {
          margin-top: 0px;
        }
      }
    }
  }

  @mixin common-header($opacity, $translateY, $border-thickness) {
    width: 100%;
    height: 55px;
    opacity: opacity; /* 初始透明度为0，让元素开始时不可见 */
    transform: translateY($translateY); /* 初始位置在屏幕顶部上方 */
    border-bottom: $border-thickness solid #dcdfe6;
  }

  .header {
    position: fixed;
    top: 0px;
    @include common-header(1, 0, 1px);
    // 这一段是设置背景阴影效果
    background-image: radial-gradient(transparent 1px, var(--el-bg-color) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    -webkit-font-smoothing: antialiased;

    .header-container {
      height: var(--header-height);
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 24px 0 24px;
      position: relative;

      .app-logo {
        height: 24px;
      }
    }
  }
}
</style>

<template>
  <div class="main-container">
    <div class="header">
      <div class="header-container">
        <div style="height: 100%; display: flex; align-items: center">
          <img src="@/assets/svgs/logo_white.svg" class="app-logo" />
        </div>
        <div style="margin-left: 20px">
          <el-text style="font-size: 24px; white-space: nowrap" type="primary"
            >涂布滤芯流量监控</el-text
          >
        </div>
        <div style="margin-left: 20px; display: flex; flex-direction: row">
          <el-text size="large" style="white-space: nowrap">基地名称：</el-text>
          <el-select v-model="site" style="width: 200px">
            <el-option
              v-for="siteItem in siteList"
              :key="siteItem.id"
              :label="siteItem.name"
              :value="siteItem.id"
            ></el-option>
          </el-select>
        </div>
        <div style="margin-left: 20px; display: flex; flex-direction: row">
          <el-text size="large" style="white-space: nowrap">工序名称：</el-text>
          <el-select v-model="processStepName" style="width: 200px">
            <el-option
              v-for="processStepNameItem in processStepNameList"
              :key="processStepNameItem.id"
              :label="processStepNameItem.name"
              :value="processStepNameItem.id"
            ></el-option>
          </el-select>
        </div>
        <div style="margin-left: 20px; display: flex; flex-direction: row">
          <el-text size="large" style="white-space: nowrap">设备资源号：</el-text>
          <el-select v-model="resourceId" style="width: 200px">
            <el-option
              v-for="deviceInfoItem in deviceInfoList"
              :key="deviceInfoItem.id"
              :label="deviceInfoItem.name"
              :value="deviceInfoItem.id"
            ></el-option>
          </el-select>
        </div>
        <div style="margin-left: 20px; display: flex; flex-direction: row">
          <el-button type="primary" :icon="Search" @click="searchFilterInfo"></el-button>
          <el-button type="primary" @click="searchRecords">滤芯更换记录</el-button>
        </div>
      </div>
    </div>
    <div ref="chartElement" class="chart-container"></div>
    <div class="bottom-container">
      <div class="left-container">
        <div class="left-content">
          <div v-for="lableItem in editLabelList" :key="lableItem.label" class="input-item">
            <el-text style="width: 200px">{{ lableItem.label }}</el-text>
            <el-input v-model="lableItem.value"></el-input>
          </div>
          <el-button type="primary" @click="updateParameters">更新参数设定</el-button>
        </div>
      </div>
      <div class="right-container">
        <div class="right-content">
          <div v-for="lableItem in readOnlyLableList" :key="lableItem.label" class="input-item">
            <el-text style="width: 200px">{{ lableItem.label }}</el-text>
            <el-input v-model="lableItem.value" disabled></el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import type { EChartsType } from "echarts";
import {
  readOnlyLableList,
  editLabelList,
  chartOptions,
  siteList,
  processStepNameList,
  deviceInfoList
} from "./filter-element";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const chartElement = ref(null);
let myChart: EChartsType | null = null;

const site = ref<number | null>();
const processStepName = ref<string | null>();
const resourceId = ref<string | null>();

const initCharts = () => {
  myChart = echarts.init(chartElement.value);
  myChart.setOption(chartOptions);
};

const updateParameters = () => {
  ElMessage.info("更新参数设定！");
};

const searchFilterInfo = () => {
  ElMessage.info("查询设备信息！");
};

const searchRecords = () => {
  ElMessage.info("查询更换记录！");
};

onMounted(() => {
  document.title = "涂布滤芯";
  initCharts();
});

onUnmounted(() => {
  if (myChart != null) {
    myChart.dispose();
  }
});
</script>

